<template>
  <footer class="footer">
    <div class="dj_com kefu">
      <img src="../../assets/icon/detail/kefu_66.png" alt="" />
      <div>客服</div>
    </div>
    <div class="dj_com collect" @click="clickCollect">
      <img
        src="../../assets/icon/detail/xin_66.png"
        alt=""
        v-if="userCollect"
      />
      <img src="../../assets/icon/detail/xin_661.png" alt="" v-else />

      <div>收藏</div>
    </div>
    <div class="dj_com cart" @click="goCart">
      <img src="../../assets/icon/detail/cart_66.png" alt="" />
      <div>购物车</div>
      <span>{{ cartCount }}</span>
    </div>
    <div class="btns">
      <div class="addCart" @click="openAttr">加入购物车</div>
      <div
        :class="['buy', isBuy == '已售罄' ? 'bgc1' : 'bgc2']"
        @click="openAttr"
      >
        {{ isBuy }}
      </div>
    </div>
  </footer>
</template>

<script>
 import {Debounce,Throttle} from "@/utils/tools";
import { Toast } from "vant";
export default {
  data() {
    return {
      isCollect: null, // 没有被收藏
      isAdd: false,
      cartCount: 0,
      cartId: 0,
      new: 0,
    };
  },
  props: {
    productId: {
      type: [Number, String],
    },
    unique: {
      type: String,
    },
    count: {
      type: Number,
    },
    userCollect: {
      type: Boolean,
    },
    isBuy: {
      type: String,
    },
    isShowAttr: {
      type: Boolean,
    },
  },
  watch: {
    new(val) {
      if (val == 1) {
        this.addCart();
      }
    },
    cartId(val) {
      if (this.new == 1) {
        this.$router.push("/order/submit/" + this.cartId);
      }
    },
  },
  created() {
    this.isCollect = this.userCollect;
    this.initCartCount();
  },
  methods: {
    goCart() {
      this.$router.push("/cart");
    },
    // 打开属性选择器
    openAttr(e) {
      if (this.isShowAttr) {
        if (e.target.className.includes("buy")) {
          // 执行直接购买
          console.log("我想直接购买");
          this.new = 1;
        } else {
          this.new = 0;
          this.addCart();
        }
      } else {
        this.$emit("openAttr", true);
      }

      //   if (this.isAdd) {
      //
      //     this.isAdd = false
      //   } else {
      //     this.addCart();
      //     this.isAdd = false
      //   }
      //   this.isAdd = !this.isAdd;
    },

    open:Debounce(function(e){
      this.openAttr(e)
    },300),


    addCart() {
      if (this.isBuy == "已售罄") {
        this.$toast.show("产品已售罄", 500);
        return;
      }

      let token = localStorage.getItem("token");
      console.log(token);
      let url = "/api/cart/add";
      let data = {
        cartNum: this.count,
        new: this.new,
        productId: this.productId,
        uniqueId: this.unique,
      };
      let pro = axios({
        method: "Post",
        url: url,
        data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          this.$toast.show("添加成功", 500);
          console.log("添加成功", res.data);
          this.cartId = res.data.data.cartId;
          this.$emit("openAttr", false)
          
          setTimeout(() => {
            this.initCartCount();
          }, 500);
        })
        .catch((err) => {
          this.$toast.show("操作失败", 500);
        });
    },

    // 提交表单
    // addConfrim() {
    //   let token = localStorage.getItem("token");
    //   console.log(token);
    //   let url = "/api/order/confirm";
    //   let data = {
    //    cartId:this.cartId
    //   };
    //   let pro = axios({
    //     method: "Post",
    //     url: url,
    //     data: data,
    //     headers: {
    //       "Authori-zation": "Bearer " + token,
    //     },
    //   })
    //     .then((res) => {
    //       console.log("commit",res.data)
    //     })
    //     .catch((err) => {
    //       console.log("失败");
    //     });
    // },

    clickCollect() {
      if (this.userCollect) {
        this.deleteCollect();
      } else {
        this.addCollect();
      }

      this.isCollect = !this.isCollect;
      this.$emit("share-isCollect", this.isCollect);
    },

    // 点击收藏
    addCollect() {
      let token = localStorage.getItem("token");
      // let cart = this.cartIdList.join(",")

      let url = "/api/collect/all";
      let data = {
        id: this.productId,
        category: "product",
      };
      let pro = axios({
        method: "post",
        url: url,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
        data: data,
      })
        .then((res) => {
          console.log("收藏。。成功", res.data);
          let { status } = res.data;
          if (status == 200)  {
            this.$toast.show("收藏成功", 500);
          } else {
             this.$toast.show("收藏失败", 500);
          }
        })
        .catch((err) => {
          console.log("收藏。。失败");
        });
    },

    deleteCollect() {
      let url = "/api/collect/del";
      let token = localStorage.getItem("token");
      let data = {
        id: this.productId,
        category: "product",
      };
      let pro = axios({
        method: "post",
        url: url,
        data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          // let { status , data} = res.data
          // if(status == 200){
          //   this.List = data
          // }
          this.$toast.show("取消收藏", 1500);
          // location.reload();
          console.log("用户收藏数据获取成功", res.data);
        })
        .catch((err) => {
          console.log("用户收藏数据回去失败");
        });
    },

    // 购物车的数量
    initCartCount() {
      let url = "/api/cart/count?numType=0";
      let token = localStorage.getItem("token");
      let data = {
        id: this.productId,
        category: "product",
      };
      let pro = axios({
        method: "get",
        url: url,

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          this.cartCount = res.data.data.count;
          console.log("成功", res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 11111;
  background-color: #fff;
  height: 50px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  > div {
    height: 50px;
  }
  .dj_com {
    font-size: 12px;
    color: #666;
    // padding: 0 3px;
    // width: 50px;
    > img {
      display: block;
      width: 20px;
      height: 20px;
      margin: 10px auto 0;
    }
  }

  .cart {
    position: relative;

    span {
      position: absolute;
      top: 2px;
      right: 0px;
      display: inline-block;

      font-size: 12px;
      padding: 2px 4px;
      color: #fff;
      background-color: #fc4141;
      border-radius: 8px;
    }
  }

  .btns {
    display: flex;
    align-items: center;
    > div {
      height: 38px;
      width: 111px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 38px;
    }
    .addCart {
      border-top-left-radius: 19px;
      border-bottom-left-radius: 19px;
      background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#fea10f),
        to(#fa8013)
      );
      background-image: linear-gradient(90deg, #fea10f 0, #fa8013);
    }
    .buy {
      border-top-right-radius: 19px;
      border-bottom-right-radius: 19px;
    }
    .buy.bgc1 {
      background-color: #bbb !important;
    }
    .buy.bgc2 {
      background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#fa6514),
        to(#e93323)
      );
      background-image: linear-gradient(90deg, #fa6514 0, #e93323);
    }
  }
}
</style>

